கிரிட்டிக்கல் ரெண்டரிங் பாதையை பகுப்பாய்வு செய்து மேம்படுத்துவதன் மூலம் வலை செயல்திறனில் தேர்ச்சி பெறுங்கள். ஜாவாஸ்கிரிப்ட் ரெண்டரிங்கை எவ்வாறு பாதிக்கிறது மற்றும் அதை எவ்வாறு சரிசெய்வது என்பது குறித்த டெவலப்பர்களுக்கான ஒரு விரிவான வழிகாட்டி.
ஜாவாஸ்கிரிப்ட் செயல்திறன் மேம்படுத்தல்: கிரிட்டிக்கல் ரெண்டரிங் பாதையின் ஒரு ஆழமான பார்வை
வலை மேம்பாட்டு உலகில், வேகம் என்பது ஒரு அம்சம் மட்டுமல்ல; அது ஒரு நல்ல பயனர் அனுபவத்தின் அடித்தளம். மெதுவாக ஏற்றப்படும் ஒரு இணையதளம் அதிக பவுன்ஸ் விகிதங்கள், குறைந்த மாற்றங்கள், மற்றும் விரக்தியடைந்த பார்வையாளர்களுக்கு வழிவகுக்கும். பல காரணிகள் வலை செயல்திறனுக்கு பங்களித்தாலும், மிகவும் அடிப்படையான மற்றும் அடிக்கடி தவறாகப் புரிந்துகொள்ளப்பட்ட கருத்துக்களில் ஒன்று கிரிட்டிக்கல் ரெண்டரிங் பாதை (CRP) ஆகும். செயல்திறனில் தீவிரமாக இருக்கும் எந்தவொரு டெவலப்பருக்கும், உலாவிகள் உள்ளடக்கத்தை எவ்வாறு ரெண்டர் செய்கின்றன மற்றும், மிக முக்கியமாக, ஜாவாஸ்கிரிப்ட் இந்த செயல்முறையுடன் எவ்வாறு தொடர்பு கொள்கிறது என்பதைப் புரிந்துகொள்வது மிக முக்கியமானது.
இந்த விரிவான வழிகாட்டி உங்களை கிரிட்டிக்கல் ரெண்டரிங் பாதையின் ஆழமான பயணத்திற்கு அழைத்துச் செல்லும், குறிப்பாக ஜாவாஸ்கிரிப்டின் பங்கில் கவனம் செலுத்துகிறது. அதை எவ்வாறு பகுப்பாய்வு செய்வது, இடையூறுகளைக் கண்டறிவது, மற்றும் உங்கள் வலைப் பயன்பாடுகளை உலகளாவிய பயனர் தளத்திற்கு வேகமாகவும் பதிலளிக்கக்கூடியதாகவும் மாற்றும் சக்திவாய்ந்த மேம்படுத்தல் நுட்பங்களைப் பயன்படுத்துவது எப்படி என்பதை நாங்கள் ஆராய்வோம்.
கிரிட்டிக்கல் ரெண்டரிங் பாதை என்றால் என்ன?
கிரிட்டிக்கல் ரெண்டரிங் பாதை என்பது ஒரு உலாவி HTML, CSS, மற்றும் ஜாவாஸ்கிரிப்டை திரையில் தெரியும் பிக்சல்களாக மாற்றுவதற்கு எடுக்க வேண்டிய படிகளின் வரிசையாகும். CRP மேம்படுத்தலின் முதன்மை குறிக்கோள், ஆரம்பத்தில், "above-the-fold" உள்ளடக்கத்தை பயனருக்கு கூடிய விரைவில் ரெண்டர் செய்வதாகும். இது எவ்வளவு வேகமாக நடக்கிறதோ, அவ்வளவு வேகமாக பயனர் பக்கம் ஏற்றப்படுவதாக உணர்கிறார்.
இந்த பாதையில் பல முக்கிய நிலைகள் உள்ளன:
- DOM கட்டுமானம்: இந்த செயல்முறை, உலாவி சேவையகத்திலிருந்து HTML ஆவணத்தின் முதல் பைட்டுகளைப் பெறும்போது தொடங்குகிறது. அது HTML மார்க்கப்பை ஒவ்வொரு எழுத்தாகப் பிரித்து, Document Object Model (DOM)-ஐ உருவாக்குகிறது. DOM என்பது HTML ஆவணத்தில் உள்ள அனைத்து நோடுகளையும் (கூறுகள், பண்புக்கூறுகள், உரை) குறிக்கும் ஒரு மரம் போன்ற அமைப்பாகும்.
- CSSOM கட்டுமானம்: உலாவி DOM-ஐ உருவாக்கும்போது, அது ஒரு CSS ஸ்டைல்ஷீட்டை (ஒரு
<link>குறிச்சொல்லில் அல்லது ஒரு இன்லைன்<style>பிளாக்கில்) சந்தித்தால், அது CSS Object Model (CSSOM)-ஐ உருவாக்கத் தொடங்குகிறது. DOM-ஐப் போலவே, CSSOM என்பது பக்கத்திற்கான அனைத்து ஸ்டைல்கள் மற்றும் அவற்றின் உறவுகளைக் கொண்ட ஒரு மரம் போன்ற அமைப்பாகும். HTML-ஐப் போலல்லாமல், CSS இயல்பாகவே ரெண்டர்-பிளாக்கிங் ஆகும். அனைத்து CSS-ஐயும் பதிவிறக்கம் செய்து பாகுபடுத்தும் வரை உலாவியால் பக்கத்தின் எந்தப் பகுதியையும் ரெண்டர் செய்ய முடியாது, ஏனெனில் பிந்தைய ஸ்டைல்கள் முந்தையவற்றை மேலெழுதக்கூடும். - ரெண்டர் ட்ரீ கட்டுமானம்: DOM மற்றும் CSSOM இரண்டும் தயாரானதும், உலாவி அவற்றை இணைத்து ரெண்டர் ட்ரீயை உருவாக்குகிறது. இந்த மரத்தில் பக்கத்தை ரெண்டர் செய்யத் தேவையான நோடுகள் மட்டுமே உள்ளன. எடுத்துக்காட்டாக,
display: none;கொண்ட கூறுகள் மற்றும்<head>குறிச்சொல் ரெண்டர் ட்ரீயில் சேர்க்கப்படவில்லை, ஏனெனில் அவை பார்வைக்கு ரெண்டர் செய்யப்படவில்லை. ரெண்டர் ட்ரீக்கு எதைக் காட்ட வேண்டும் என்பது தெரியும், ஆனால் எங்கே அல்லது எவ்வளவு பெரியதாகக் காட்ட வேண்டும் என்பது தெரியாது. - லேஅவுட் (அல்லது ரிஃப்ளோ): ரெண்டர் ட்ரீ உருவாக்கப்பட்டவுடன், உலாவி லேஅவுட் நிலைக்குச் செல்கிறது. இந்த படியில், அது வியூபோர்ட்டைப் பொறுத்து ரெண்டர் ட்ரீயில் உள்ள ஒவ்வொரு நோடின் சரியான அளவு மற்றும் நிலையை கணக்கிடுகிறது. இந்த நிலையின் வெளியீடு, பக்கத்தில் உள்ள ஒவ்வொரு தனிமத்தின் துல்லியமான வடிவவியலைப் பிடிக்கும் ஒரு "பாக்ஸ் மாடல்" ஆகும்.
- பெயிண்ட்: இறுதியாக, உலாவி லேஅவுட் தகவலை எடுத்து, ஒவ்வொரு நோடிற்குமான பிக்சல்களை திரையில் "பெயிண்ட்" செய்கிறது. இதில் உரை, வண்ணங்கள், படங்கள், பார்டர்கள், மற்றும் நிழல்களை வரைவது அடங்கும் - அதாவது பக்கத்தின் ஒவ்வொரு காட்சிப் பகுதியையும் ராஸ்டரைஸ் செய்வது. செயல்திறனை மேம்படுத்த இந்த செயல்முறை பல அடுக்குகளில் நடக்கலாம்.
- காம்போசிட்: பக்கத்தின் உள்ளடக்கம் பல அடுக்குகளில் பெயிண்ட் செய்யப்பட்டிருந்தால், உலாவி இறுதிப் படத்தை திரையில் காட்ட இந்த அடுக்குகளை சரியான வரிசையில் ஒருங்கிணைக்க வேண்டும். இந்த படி அனிமேஷன்கள் மற்றும் ஸ்க்ரோலிங்கிற்கு மிகவும் முக்கியமானது, ஏனெனில் காம்போசிட்டிங் பொதுவாக லேஅவுட் மற்றும் பெயிண்ட் நிலைகளை மீண்டும் இயக்குவதை விட கணக்கீட்டு ரீதியாக குறைந்த செலவாகும்.
கிரிட்டிக்கல் ரெண்டரிங் பாதையில் ஜாவாஸ்கிரிப்டின் சீர்குலைக்கும் பங்கு
அப்படியானால் ஜாவாஸ்கிரிப்ட் இந்தப் படத்தில் எங்கே பொருந்துகிறது? ஜாவாஸ்கிரிப்ட் DOM மற்றும் CSSOM இரண்டையும் மாற்றக்கூடிய ஒரு சக்திவாய்ந்த மொழியாகும். இருப்பினும், இந்த சக்திக்கு ஒரு விலை உண்டு. ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் ரெண்டரிங் பாதையைத் தடுக்கலாம், மேலும் அடிக்கடி தடுக்கிறது, இது ரெண்டரிங்கில் குறிப்பிடத்தக்க தாமதங்களுக்கு வழிவகுக்கிறது.
பார்சர்-பிளாக்கிங் ஜாவாஸ்கிரிப்ட்
இயல்பாக, ஜாவாஸ்கிரிப்ட் பார்சர்-பிளாக்கிங் ஆகும். உலாவியின் HTML பார்சர் ஒரு <script> குறிச்சொல்லை சந்திக்கும்போது, அது DOM-ஐ உருவாக்கும் செயல்முறையை இடைநிறுத்த வேண்டும். பின்னர் அது ஜாவாஸ்கிரிப்ட் கோப்பைப் பதிவிறக்கம் செய்யவும் (வெளிப்புறமாக இருந்தால்), பாகுபடுத்தவும், மற்றும் இயக்கவும் தொடர்கிறது. இந்த செயல்முறை பிளாக்கிங் ஆகும், ஏனெனில் ஸ்கிரிப்ட் document.write() போன்ற ஒன்றைச் செய்யலாம், இது முழு DOM அமைப்பையும் மாற்றக்கூடும். ஸ்கிரிப்ட் முடிவடையும் வரை உலாவிக்கு காத்திருப்பதைத் தவிர வேறு வழியில்லை, அதன் பிறகுதான் அது பாதுகாப்பாக HTML பாகுபடுத்தலை மீண்டும் தொடங்க முடியும்.
இந்த ஸ்கிரிப்ட் உங்கள் ஆவணத்தின் <head> பகுதியில் அமைந்திருந்தால், அது DOM கட்டுமானத்தை ஆரம்பத்திலேயே தடுக்கிறது. இதன் பொருள், உலாவிக்கு ரெண்டர் செய்ய எந்த உள்ளடக்கமும் இல்லை, மற்றும் ஸ்கிரிப்ட் முழுமையாக செயலாக்கப்படும் வரை பயனர் ஒரு வெற்று வெள்ளைத் திரையைப் பார்த்துக் கொண்டிருப்பார். இது மோசமான உணரப்பட்ட செயல்திறனுக்கான ஒரு முதன்மைக் காரணமாகும்.
DOM மற்றும் CSSOM கையாளுதல்
ஜாவாஸ்கிரிப்ட் CSSOM-ஐயும் வினவலாம் மற்றும் மாற்றலாம். உதாரணமாக, உங்கள் ஸ்கிரிப்ட் element.style.width போன்ற ஒரு கணக்கிடப்பட்ட ஸ்டைலைக் கேட்டால், சரியான பதிலை வழங்க உலாவி முதலில் அனைத்து CSS-ம் பதிவிறக்கம் செய்யப்பட்டு பாகுபடுத்தப்பட்டிருப்பதை உறுதி செய்ய வேண்டும். இது உங்கள் ஜாவாஸ்கிரிப்ட்டிற்கும் உங்கள் CSS-க்கும் இடையே ஒரு சார்புநிலையை உருவாக்குகிறது, அங்கு ஸ்கிரிப்ட் இயக்கம் CSSOM தயாராகக் காத்திருப்பதால் தடுக்கப்படலாம்.
மேலும், ஜாவாஸ்கிரிப்ட் DOM-ஐ மாற்றினால் (எ.கா., ஒரு தனிமத்தைச் சேர்த்தால் அல்லது அகற்றினால்) அல்லது CSSOM-ஐ மாற்றினால் (எ.கா., ஒரு வகுப்பை மாற்றினால்), அது உலாவி வேலையின் ஒரு அடுக்கைத் தூண்டக்கூடும். ஒரு மாற்றம் உலாவியை லேஅவுட்டை மீண்டும் கணக்கிட (ஒரு ரிஃப்ளோ) மற்றும் பின்னர் திரையின் பாதிக்கப்பட்ட பகுதிகளை, அல்லது முழுப் பக்கத்தையும் கூட மீண்டும் பெயிண்ட் செய்ய கட்டாயப்படுத்தலாம். அடிக்கடி அல்லது தவறான நேரத்தில் செய்யப்படும் கையாளுதல்கள் ஒரு மந்தமான, பதிலளிக்காத பயனர் இடைமுகத்திற்கு வழிவகுக்கும்.
கிரிட்டிக்கல் ரெண்டரிங் பாதையை எவ்வாறு பகுப்பாய்வு செய்வது
நீங்கள் மேம்படுத்துவதற்கு முன், முதலில் அளவிட வேண்டும். CRP-ஐ பகுப்பாய்வு செய்வதற்கு உலாவி டெவலப்பர் கருவிகள் உங்கள் சிறந்த நண்பன். இந்த நோக்கத்திற்காக ஒரு சக்திவாய்ந்த கருவிகளின் தொகுப்பை வழங்கும் Chrome DevTools-இல் கவனம் செலுத்துவோம்.
பெர்ஃபார்மன்ஸ் டாப்பைப் பயன்படுத்துதல்
பெர்ஃபார்மன்ஸ் டாப் உங்கள் பக்கத்தை ரெண்டர் செய்ய உலாவி செய்யும் எல்லாவற்றின் விரிவான காலவரிசையை வழங்குகிறது.
- Chrome DevTools-ஐத் திறக்கவும் (Ctrl+Shift+I அல்லது Cmd+Option+I).
- Performance டாப்பிற்குச் செல்லவும்.
- முக்கிய அளவீடுகளை காலவரிசையில் மேலடுக்குவதைக் காண "Web Vitals" தேர்வுப்பெட்டி தேர்வுசெய்யப்பட்டுள்ளதை உறுதிசெய்யவும்.
- பக்கச் சுமையை விவரக்குறிப்பிடத் தொடங்க ரீலோடு பொத்தானைக் கிளிக் செய்யவும் (அல்லது Ctrl+Shift+E / Cmd+Shift+E ஐ அழுத்தவும்).
பக்கம் ஏற்றப்பட்ட பிறகு, உங்களுக்கு ஒரு ஃபிளேம் சார்ட் வழங்கப்படும். Main த்ரெட் பிரிவில் என்ன தேட வேண்டும் என்பது இங்கே:
- லாங் டாஸ்க்ஸ்: 50 மில்லி விநாடிகளுக்கு மேல் எடுக்கும் எந்தவொரு பணியும் சிவப்பு முக்கோணத்தால் குறிக்கப்படும். இவை மேம்படுத்தலுக்கான முதன்மை வேட்பாளர்கள், ஏனெனில் அவை பிரதான த்ரெட்டைத் தடுத்து, UI-ஐ பதிலளிக்காததாக மாற்றும்.
- பார்ஸ் HTML (நீலம்): உலாவி உங்கள் HTML-ஐ எங்கே பாகுபடுத்துகிறது என்பதை இது காட்டுகிறது. நீங்கள் பெரிய இடைவெளிகள் அல்லது குறுக்கீடுகளைக் கண்டால், அது ஒரு பிளாக்கிங் ஸ்கிரிப்ட் காரணமாக இருக்கலாம்.
- மதிப்பீடு ஸ்கிரிப்ட் (மஞ்சள்): இங்கே ஜாவாஸ்கிரிப்ட் இயக்கப்படுகிறது. நீண்ட மஞ்சள் பிளாக்குகளைத் தேடுங்கள், குறிப்பாக பக்கச் சுமையின் ஆரம்பத்தில். இவை உங்கள் பிளாக்கிங் ஸ்கிரிப்ட்கள்.
- ஸ்டைலை மீண்டும் கணக்கிடு (ஊதா): இது CSSOM கட்டுமானம் மற்றும் ஸ்டைல் கணக்கீடுகளைக் குறிக்கிறது.
- லேஅவுட் (ஊதா): இந்த பிளாக்குகள் லேஅவுட் அல்லது ரிஃப்ளோ நிலையைக் குறிக்கின்றன. நீங்கள் இவற்றில் பலவற்றைக் கண்டால், உங்கள் ஜாவாஸ்கிரிப்ட் மீண்டும் மீண்டும் வடிவியல் பண்புகளைப் படிப்பதன் மூலமும் எழுதுவதன் மூலமும் "லேஅவுட் த்ராஷிங்"-ஐ ஏற்படுத்தக்கூடும்.
- பெயிண்ட் (பச்சை): இது பெயிண்டிங் செயல்முறை.
நெட்வொர்க் டாப்பைப் பயன்படுத்துதல்
நெட்வொர்க் டாப்பின் வாட்டர்ஃபால் சார்ட், வளப் பதிவிறக்கங்களின் வரிசை மற்றும் கால அளவைப் புரிந்துகொள்ள விலைமதிப்பற்றது.
- DevTools-ஐத் திறந்து Network டாப்பிற்குச் செல்லவும்.
- பக்கத்தை மீண்டும் ஏற்றவும்.
- வாட்டர்ஃபால் காட்சி ஒவ்வொரு வளமும் (HTML, CSS, JS, படங்கள்) எப்போது கோரப்பட்டது மற்றும் பதிவிறக்கப்பட்டது என்பதைக் காட்டுகிறது.
வாட்டர்ஃபாலின் மேல் உள்ள கோரிக்கைகளுக்கு நெருக்கமான கவனம் செலுத்துங்கள். பக்கம் ரெண்டர் செய்யத் தொடங்குவதற்கு முன்பு பதிவிறக்கப்படும் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை நீங்கள் எளிதாகக் கண்டறியலாம். இவை உங்கள் ரெண்டர்-பிளாக்கிங் வளங்கள்.
லைட்ஹவுஸைப் பயன்படுத்துதல்
லைட்ஹவுஸ் என்பது Chrome DevTools-இல் (லைட்ஹவுஸ் டாப்பின் கீழ்) கட்டமைக்கப்பட்ட ஒரு தானியங்கு தணிக்கைக் கருவியாகும். இது ஒரு உயர் மட்ட செயல்திறன் மதிப்பெண் மற்றும் செயல்படக்கூடிய பரிந்துரைகளை வழங்குகிறது.
CRP-க்கான ஒரு முக்கிய தணிக்கை "ரெண்டர்-பிளாக்கிங் வளங்களை நீக்கு." இந்த அறிக்கை முதல் உள்ளடக்க பெயிண்ட்டை (FCP) தாமதப்படுத்தும் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை வெளிப்படையாகப் பட்டியலிடும், இது உங்களுக்கு மேம்படுத்தலுக்கான இலக்குகளின் தெளிவான பட்டியலை வழங்கும்.
ஜாவாஸ்கிரிப்ட்டிற்கான முக்கிய மேம்படுத்தல் உத்திகள்
இப்போது நாம் சிக்கல்களை எவ்வாறு அடையாளம் காண்பது என்று அறிந்திருப்பதால், தீர்வுகளை ஆராய்வோம். ஆரம்ப ரெண்டரைத் தடுக்கும் ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைப்பதே குறிக்கோள்.
1. `async` மற்றும் `defer`-இன் சக்தி
ஜாவாஸ்கிரிப்ட் HTML பார்சரைத் தடுப்பதைத் தடுப்பதற்கான எளிமையான மற்றும் மிகவும் பயனுள்ள வழி, உங்கள் <script> குறிச்சொற்களில் `async` மற்றும் `defer` பண்புக்கூறுகளைப் பயன்படுத்துவதாகும்.
- ஸ்டாண்டர்டு
<script>:<script src="script.js"></script>
நாம் விவாதித்தபடி, இது பார்சர்-பிளாக்கிங் ஆகும். HTML பாகுபடுத்தல் நின்றுவிடும், ஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டு இயக்கப்படும், பின்னர் பாகுபடுத்தல் மீண்டும் தொடங்கும். <script async>:<script src="script.js" async></script>
ஸ்கிரிப்ட் HTML பாகுபடுத்தலுடன் இணையாக, ஒத்திசைவற்ற முறையில் பதிவிறக்கம் செய்யப்படுகிறது. ஸ்கிரிப்ட் பதிவிறக்கம் முடிந்தவுடன், HTML பாகுபடுத்தல் இடைநிறுத்தப்பட்டு, ஸ்கிரிப்ட் இயக்கப்படுகிறது. இயக்க வரிசைக்கு உத்தரவாதம் இல்லை; ஸ்கிரிப்ட்கள் கிடைத்தவுடன் இயக்கப்படுகின்றன. இது DOM அல்லது பிற ஸ்கிரிப்ட்களைச் சார்ந்திராத சுயாதீனமான, மூன்றாம் தரப்பு ஸ்கிரிப்ட்களுக்கு சிறந்தது, அதாவது அனலிட்டிக்ஸ் அல்லது விளம்பர ஸ்கிரிப்ட்கள்.<script defer>:<script src="script.js" defer></script>
ஸ்கிரிப்ட் HTML பாகுபடுத்தலுடன் இணையாக, ஒத்திசைவற்ற முறையில் பதிவிறக்கம் செய்யப்படுகிறது. இருப்பினும், HTML ஆவணம் முழுமையாக பாகுபடுத்தப்பட்ட பின்னரே ஸ்கிரிப்ட் இயக்கப்படுகிறது (`DOMContentLoaded` நிகழ்வுக்கு சற்று முன்பு). `defer` கொண்ட ஸ்கிரிப்ட்கள் ஆவணத்தில் தோன்றும் வரிசையில் இயக்கப்படும் என்பதற்கு உத்தரவாதம் உண்டு. DOM உடன் தொடர்பு கொள்ள வேண்டிய மற்றும் ஆரம்ப பெயிண்ட்டிற்கு முக்கியமானதாக இல்லாத பெரும்பாலான ஸ்கிரிப்ட்களுக்கு இது விரும்பப்படும் முறையாகும்.
பொது விதி: உங்கள் முக்கிய பயன்பாட்டு ஸ்கிரிப்ட்களுக்கு `defer` பயன்படுத்தவும். சுயாதீனமான மூன்றாம் தரப்பு ஸ்கிரிப்ட்களுக்கு `async` பயன்படுத்தவும். ஆரம்ப ரெண்டருக்கு முற்றிலும் அவசியமானால் தவிர, <head> பகுதியில் பிளாக்கிங் ஸ்கிரிப்ட்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
2. கோட் ஸ்பிளிட்டிங்
நவீன வலைப் பயன்பாடுகள் பெரும்பாலும் ஒரே, பெரிய ஜாவாஸ்கிரிப்ட் கோப்பில் தொகுக்கப்படுகின்றன. இது HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைத்தாலும், ஆரம்ப பக்கக் காட்சிக்குத் தேவைப்படாத நிறைய குறியீட்டைப் பயனர் பதிவிறக்க வேண்டிய கட்டாயத்தில் உள்ளது.
கோட் ஸ்பிளிட்டிங் என்பது அந்த பெரிய தொகுப்பை தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய துண்டுகளாக உடைக்கும் செயல்முறையாகும். எடுத்துக்காட்டாக:
- ஆரம்ப துண்டு: தற்போதைய பக்கத்தின் தெரியும் பகுதியை ரெண்டர் செய்யத் தேவையான அத்தியாவசிய ஜாவாஸ்கிரிப்டை மட்டுமே கொண்டுள்ளது.
- தேவைக்கேற்ப துண்டுகள்: பிற வழிகள், மோடல்கள், அல்லது மடிப்புக்குக் கீழே உள்ள அம்சங்களுக்கான குறியீட்டைக் கொண்டுள்ளது. பயனர் அந்த வழிக்குச் செல்லும்போது அல்லது அம்சத்துடன் தொடர்பு கொள்ளும்போது மட்டுமே இவை ஏற்றப்படுகின்றன.
Webpack, Rollup, மற்றும் Parcel போன்ற நவீன பண்ட்லர்கள் டைனமிக் `import()` தொடரியலைப் பயன்படுத்தி கோட் ஸ்பிளிட்டிங்கிற்கு உள்ளமைக்கப்பட்ட ஆதரவைக் கொண்டுள்ளன. ரியாக்ட் (`React.lazy` உடன்) மற்றும் Vue போன்ற கட்டமைப்புகளும் கூறு மட்டத்தில் குறியீட்டைப் பிரிப்பதற்கான எளிதான வழிகளை வழங்குகின்றன.
3. ட்ரீ ஷேக்கிங் மற்றும் டெட் கோட் எலிமினேஷன்
கோட் ஸ்பிளிட்டிங் செய்த பிறகும், உங்கள் ஆரம்ப தொகுப்பில் உண்மையில் பயன்படுத்தப்படாத குறியீடு இருக்கலாம். நீங்கள் நூலகங்களை இறக்குமதி செய்யும்போது ஆனால் அவற்றின் ஒரு சிறிய பகுதியை மட்டுமே பயன்படுத்தும்போது இது பொதுவானது.
ட்ரீ ஷேக்கிங் என்பது உங்கள் இறுதி தொகுப்பிலிருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற நவீன பண்ட்லர்களால் பயன்படுத்தப்படும் ஒரு செயல்முறையாகும். இது உங்கள் `import` மற்றும் `export` அறிக்கைகளை நிலையாக பகுப்பாய்வு செய்து, எந்தக் குறியீட்டை அடைய முடியாது என்பதை தீர்மானிக்கிறது. உங்கள் பயனர்களுக்குத் தேவையான குறியீட்டை மட்டுமே நீங்கள் அனுப்புவதை உறுதி செய்வதன் மூலம், நீங்கள் தொகுப்பு அளவுகளை கணிசமாகக் குறைக்கலாம், இது வேகமான பதிவிறக்கங்கள் மற்றும் பாகுபடுத்தல் நேரங்களுக்கு வழிவகுக்கிறது.
4. மினிஃபிகேஷன் மற்றும் சுருக்கம்
எந்தவொரு உற்பத்தி இணையதளத்திற்கும் இவை அடிப்படைக் படிகள்.
- மினிஃபிகேஷன்: இது உங்கள் குறியீட்டிலிருந்து தேவையற்ற எழுத்துக்களை - அதாவது வெற்று இடம், கருத்துரைகள், மற்றும் புதிய வரிகள் - அகற்றி, அதன் செயல்பாட்டை மாற்றாமல் மாறிப் பெயர்களைக் குறைக்கும் ஒரு தானியங்கு செயல்முறையாகும். இது கோப்பு அளவைக் குறைக்கிறது. Terser (ஜாவாஸ்கிரிப்ட்டிற்கு) மற்றும் cssnano (CSS-க்கு) போன்ற கருவிகள் பொதுவாகப் பயன்படுத்தப்படுகின்றன.
- சுருக்கம்: மினிஃபிகேஷனுக்குப் பிறகு, உங்கள் சேவையகம் கோப்புகளை உலாவிக்கு அனுப்புவதற்கு முன்பு அவற்றைச் சுருக்க வேண்டும். Gzip மற்றும், இன்னும் திறம்பட, Brotli போன்ற வழிமுறைகள் கோப்பு அளவுகளை 70-80% வரை குறைக்க முடியும். உலாவி பின்னர் அவற்றைப் பெற்றவுடன் அன்-கம்ப்ரஸ் செய்கிறது. இது ஒரு சேவையக உள்ளமைவு, ஆனால் இது நெட்வொர்க் பரிமாற்ற நேரங்களைக் குறைக்க முக்கியமானது.
5. முக்கியமான ஜாவாஸ்கிரிப்டை இன்லைன் செய்தல் (கவனத்துடன் பயன்படுத்தவும்)
முதல் பெயிண்ட்டிற்கு முற்றிலும் அவசியமான மிகச் சிறிய ஜாவாஸ்கிரிப்ட் துண்டுகளுக்கு (எ.கா., ஒரு தீம் அல்லது ஒரு முக்கியமான பாலிஃபில்லை அமைத்தல்), நீங்கள் அவற்றை உங்கள் HTML-இல் நேரடியாக <head> பகுதியில் ஒரு <script> குறிச்சொல்லுக்குள் இன்லைன் செய்யலாம். இது ஒரு நெட்வொர்க் கோரிக்கையைச் சேமிக்கிறது, இது அதிக தாமதமுள்ள மொபைல் இணைப்புகளில் நன்மை பயக்கும். இருப்பினும், இது குறைவாகவே பயன்படுத்தப்பட வேண்டும். இன்லைன் செய்யப்பட்ட குறியீடு உங்கள் HTML ஆவணத்தின் அளவை அதிகரிக்கிறது மற்றும் உலாவியால் தனித்தனியாக கேச் செய்ய முடியாது. இது கவனமாகக் கருத்தில் கொள்ள வேண்டிய ஒரு வர்த்தகப் பரிமாற்றம்.
மேம்பட்ட நுட்பங்கள் மற்றும் நவீன அணுகுமுறைகள்
சர்வர்-சைட் ரெண்டரிங் (SSR) மற்றும் ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG)
Next.js (ரியாக்ட்டிற்கு), Nuxt.js (Vue-க்கு), மற்றும் SvelteKit போன்ற கட்டமைப்புகள் SSR மற்றும் SSG-ஐ பிரபலப்படுத்தியுள்ளன. இந்த நுட்பங்கள் ஆரம்ப ரெண்டரிங் வேலையை கிளையண்டின் உலாவியிலிருந்து சேவையகத்திற்கு மாற்றுகின்றன.
- SSR: சேவையகம் ஒரு கோரப்பட்ட பக்கத்திற்கான முழு HTML-ஐயும் ரெண்டர் செய்து அதை உலாவிக்கு அனுப்புகிறது. உலாவி இந்த HTML-ஐ உடனடியாகக் காட்ட முடியும், இதன் விளைவாக மிக வேகமான முதல் உள்ளடக்க பெயிண்ட் கிடைக்கும். பின்னர் ஜாவாஸ்கிரிப்ட் ஏற்றப்பட்டு பக்கத்தை "ஹைட்ரேட்" செய்கிறது, அதை ஊடாடும் வகையில் மாற்றுகிறது.
- SSG: ஒவ்வொரு பக்கத்திற்குமான HTML உருவாக்க நேரத்தில் உருவாக்கப்படுகிறது. ஒரு பயனர் ஒரு பக்கத்தைக் கோரும்போது, ஒரு நிலையான HTML கோப்பு ஒரு CDN-இலிருந்து உடனடியாக வழங்கப்படுகிறது. இது உள்ளடக்கம் நிறைந்த தளங்களுக்கு வேகமான அணுகுமுறையாகும்.
SSR மற்றும் SSG இரண்டும் பெரும்பாலான கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட் இயக்கத் தொடங்குவதற்கு முன்பே ஒரு அர்த்தமுள்ள முதல் பெயிண்ட்டை வழங்குவதன் மூலம் CRP செயல்திறனை வியத்தகு முறையில் மேம்படுத்துகின்றன.
வெப் வொர்க்கர்ஸ்
உங்கள் பயன்பாடு கனமான, நீண்ட நேரம் இயங்கும் கணக்கீடுகளைச் செய்ய வேண்டியிருந்தால் (சிக்கலான தரவு பகுப்பாய்வு, பட செயலாக்கம், அல்லது குறியாக்கவியல் போன்றவை), இதை பிரதான த்ரெட்டில் செய்வது ரெண்டரிங்கைத் தடுத்து உங்கள் பக்கத்தை உறைந்தது போல் உணர வைக்கும். வெப் வொர்க்கர்ஸ் பிரதான UI த்ரெட்டிலிருந்து முற்றிலும் தனித்தனியாக ஒரு பின்னணி த்ரெட்டில் இந்த ஸ்கிரிப்ட்களை இயக்க அனுமதிப்பதன் மூலம் ஒரு தீர்வை வழங்குகிறார்கள். இது கனமான வேலைகள் திரைக்குப் பின்னால் நடக்கும்போது உங்கள் பயன்பாட்டைப் பதிலளிக்கக்கூடியதாக வைத்திருக்கிறது.
CRP மேம்படுத்தலுக்கான ஒரு நடைமுறை வேலைப்பாய்வு
இவை அனைத்தையும் உங்கள் திட்டங்களில் நீங்கள் பயன்படுத்தக்கூடிய ஒரு செயல்படக்கூடிய வேலைப்பாய்வாக இணைப்போம்.
- தணிக்கை: ஒரு அடிப்படையுடன் தொடங்கவும். உங்கள் தற்போதைய நிலையைப் புரிந்துகொள்ள உங்கள் உற்பத்தி உருவாக்கத்தில் ஒரு லைட்ஹவுஸ் அறிக்கை மற்றும் ஒரு பெர்ஃபார்மன்ஸ் சுயவிவரத்தை இயக்கவும். உங்கள் FCP, LCP, TTI-ஐக் குறித்துக் கொண்டு, எந்தவொரு நீண்ட பணிகள் அல்லது ரெண்டர்-பிளாக்கிங் வளங்களையும் அடையாளம் காணவும்.
- அடையாளம் காணுதல்: DevTools நெட்வொர்க் மற்றும் பெர்ஃபார்மன்ஸ் டாப்களில் ஆழமாகச் செல்லவும். எந்த ஸ்கிரிப்ட்கள் மற்றும் ஸ்டைல்ஷீட்கள் ஆரம்ப ரெண்டரைத் தடுக்கின்றன என்பதைத் துல்லியமாகக் கண்டறியவும். ஒவ்வொரு வளத்திற்கும் உங்களைக் கேட்டுக்கொள்ளுங்கள்: "பயனர் ஆரம்ப உள்ளடக்கத்தைப் பார்க்க இது முற்றிலும் அவசியமானதா?"
- முன்னுரிமை அளித்தல்: மடிப்புக்கு மேலே உள்ள உள்ளடக்கத்தைப் பாதிக்கும் குறியீட்டில் உங்கள் முயற்சிகளை மையப்படுத்துங்கள். இந்த உள்ளடக்கத்தை பயனருக்கு கூடிய விரைவில் கொண்டு சேர்ப்பதே குறிக்கோள். மற்ற அனைத்தும் பின்னர் ஏற்றப்படலாம்.
- மேம்படுத்துதல்:
- அனைத்து அத்தியாவசியமற்ற ஸ்கிரிப்ட்களுக்கும்
deferஐப் பயன்படுத்தவும். - சுயாதீனமான மூன்றாம் தரப்பு ஸ்கிரிப்ட்களுக்கு
asyncஐப் பயன்படுத்தவும். - உங்கள் வழிகள் மற்றும் பெரிய கூறுகளுக்கு கோட் ஸ்பிளிட்டிங்கைச் செயல்படுத்தவும்.
- உங்கள் உருவாக்க செயல்முறை மினிஃபிகேஷன் மற்றும் ட்ரீ ஷேக்கிங்கை உள்ளடக்கியிருப்பதை உறுதிசெய்யவும்.
- உங்கள் சேவையகத்தில் Brotli அல்லது Gzip சுருக்கத்தை இயக்க உங்கள் உள்கட்டமைப்பு குழுவுடன் இணைந்து பணியாற்றுங்கள்.
- CSS-க்கு, ஆரம்பக் காட்சிக்குத் தேவையான முக்கியமான CSS-ஐ இன்லைன் செய்வதையும், மீதமுள்ளவற்றை மெதுவாக ஏற்றுவதையும் கருத்தில் கொள்ளுங்கள்.
- அனைத்து அத்தியாவசியமற்ற ஸ்கிரிப்ட்களுக்கும்
- அளவிடுதல்: மாற்றங்களைச் செயல்படுத்திய பிறகு, மீண்டும் தணிக்கையை இயக்கவும். உங்கள் புதிய மதிப்பெண்கள் மற்றும் நேரங்களை அடிப்படையுடன் ஒப்பிடவும். உங்கள் FCP மேம்பட்டதா? ரெண்டர்-பிளாக்கிங் வளங்கள் குறைவாக உள்ளதா?
- மீண்டும் செய்தல்: வலை செயல்திறன் ஒரு முறை சரிசெய்வது அல்ல; இது ஒரு தொடர்ச்சியான செயல்முறை. உங்கள் பயன்பாடு வளரும்போது, புதிய செயல்திறன் இடையூறுகள் தோன்றக்கூடும். செயல்திறன் தணிக்கையை உங்கள் மேம்பாடு மற்றும் வரிசைப்படுத்தல் சுழற்சியின் ஒரு வழக்கமான பகுதியாக ஆக்குங்கள்.
முடிவுரை: செயல்திறனுக்கான பாதையில் தேர்ச்சி பெறுதல்
கிரிட்டிக்கல் ரெண்டரிங் பாதை என்பது உங்கள் பயன்பாட்டை உயிர்ப்பிக்க உலாவி பின்பற்றும் வரைபடமாகும். டெவலப்பர்களாக, இந்தப் பாதையின் மீதான நமது புரிதலும் கட்டுப்பாடும், குறிப்பாக ஜாவாஸ்கிரிப்ட் தொடர்பாக, பயனர் அனுபவத்தை மேம்படுத்த நம்மிடம் உள்ள மிகவும் சக்திவாய்ந்த நெம்புகோல்களில் ஒன்றாகும். வெறுமனே வேலை செய்யும் குறியீட்டை எழுதுவதிலிருந்து செயல்திறன் மிக்க குறியீட்டை எழுதும் மனநிலைக்கு மாறுவதன் மூலம், செயல்பாட்டுக்குரியவை மட்டுமல்ல, உலகம் முழுவதும் உள்ள பயனர்களுக்கு வேகமான, அணுகக்கூடிய, மற்றும் மகிழ்ச்சிகரமான பயன்பாடுகளை உருவாக்க முடியும்.
பயணம் பகுப்பாய்விலிருந்து தொடங்குகிறது. உங்கள் டெவலப்பர் கருவிகளைத் திறந்து, உங்கள் பயன்பாட்டை சுயவிவரப்படுத்தி, உங்கள் பயனருக்கும் முழுமையாக ரெண்டர் செய்யப்பட்ட பக்கத்திற்கும் இடையில் நிற்கும் ஒவ்வொரு வளத்தையும் கேள்வி கேட்கத் தொடங்குங்கள். ஸ்கிரிப்ட்களைத் தாமதப்படுத்துதல், குறியீட்டைப் பிரித்தல், மற்றும் உங்கள் பேலோடைக் குறைத்தல் போன்ற உத்திகளைப் பயன்படுத்துவதன் மூலம், உலாவி தனது சிறந்த வேலையைச் செய்வதற்கு வழியைத் தெளிவுபடுத்தலாம்: மின்னல் வேகத்தில் உள்ளடக்கத்தை ரெண்டர் செய்வது.